<template>
  <div class="updatePwd">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="4">
        <span><router-link  :to="{path:'/monitor/console'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <!--<span><img :src="realtimeindex" class="equiplist"/></span>-->
        <span class="description">首页</span>
      </el-col>
      <el-col :xs="7" :sm="6" :md="18" :lg="18" :xl="21" class="con" >
      </el-col>
    </el-row>
    <div class="content">
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
          <el-form-item label="" prop="name">
            <el-input type="password" v-model="ruleForm.pwd" style="width: 500px" placeholder="原密码"></el-input>
          </el-form-item>
          <el-form-item  prop="pwd_new" label="">
            <el-input type="password" v-model="ruleForm.pwd_new" style="width: 500px" placeholder="新密码"></el-input>
          </el-form-item>
          <el-form-item  prop="pwd_confirm" label="">
            <el-input type="password" v-model="ruleForm.pwd_confirm" style="width: 500px" placeholder="确认新密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 500px" @click="updatePwd">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import returnnormalpress from '@/assets/equipv2/returnnormalpress.png'

  export default {
    props: {
    },
    components: {
    },
    data() {
      return {
        returnnormalpress,
        appendDialogShow: true,
        restatus: '更新',
        ruleForm: {
          pwd: '',
          pwd_new: '',
          pwd_confirm: ''
        },
        submit: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'mod_account_pwd',
          data: {
            pwd: '',
            pwd_new: '',
            pwd_confirm: ''
          }
        },
        rules: {
          name: [
            { required: false, message: '请输入活动名称', trigger: 'blur' }
          ],
          pwd_new: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
            { pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*_.]+$/, message: '密码必须包含字母、数字', trigger: 'blur' }
          ],
          pwd_confirm: [
            { required: true, message: '确认新密码', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
            { pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*_.]+$/, message: '密码必须包含字母、数字', trigger: 'blur' }
          ]
        }
      }
    },
    mounted() {
    },
    methods: {
      updatePwd() {
        this.submit.data.pwd = this.ruleForm.pwd
        this.submit.data.pwd_new = this.ruleForm.pwd_new
        this.submit.data.pwd_confirm = this.ruleForm.pwd_confirm
        if (this.submit.data.pwd_new !== this.submit.data.pwd_confirm) {
          this.$message({
            type: 'error',
            message: '两次密码不一致'
          })
        } else if (this.submit.data.pwd_new === '') {
          this.$message({
            type: 'error',
            message: '原密码不能为空'
          })
        } else {
          axios.post(process.env.SERVER_URL_4A + '/account', this.submit, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.$message({
              message: '修改成功',
              type: 'error'
            })
          }).catch((error) => {
            console.log(error.data.errmsg)
            this.$message({
              message: error.data.errmsg,
              type: 'error'
            })
          })
        }
      },
      // 子组件传值
      handleClose() {
        const dialogShow = this.updateDialogFalse // 所需要传的值
        this.$emit('giveFalse', dialogShow) // 传值的参数
      },
      // 还原成功返回测点列表
      restar() {
        this.$emit('restars', this.restatus)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .updatePwd{
    width: 100%;
    height: 300px;
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
        /*cursor: pointer;*/
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
        cursor: pointer;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
    /deep/ .el-form-item__error {
      color: #f56c6c;
      font-size: 12px;
      line-height: 1;
      padding-top: 4px;
      position: absolute;
      top: 100%;
      left: 0;
    }
    .Cheader {
      width: 98%;
      height: 60px;
      line-height: 60px;
      /*border-bottom: 1px solid #E7E7E7;*/
    }
    .content{
      width: 500px;
      height: 400px;
      margin: 100px auto;
      .input{
        margin-top: 0px;
      }
    }
  }
</style>
